<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .list{padding: 20px;background: #aaa;margin: 0;}
    .list li{padding: 6px;background: #ccc;margin: 20px 0;}
    .list p{padding: 6px;background: #eee;}
  </style>
</head>
<body>
  <ul class="list">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <p>段落</p>
    <p>段落</p>
    <li>link4</li>
  </ul>
</body>
<script>

  // var ali = document.querySelectorAll(".list li")
  // for(var i=0;i<ali.length;i++){
  //   ali[i].onclick = function(){
  //     console.log(this.innerHTML);
  //   }
  // }

  var list = document.querySelector(".list")

  list.onclick = function(eve){
    var e = eve ||window.event
    var target = e.target || e.srcElement;

    if(target.tagName === "LI"){
      console.log(target)
    }
  }


</script>
</html>